import React, { Component } from 'react'
import CardContainer from '../component/card.container'

class IncomeStatics extends Component {
  constructor(props) {
    super(props)
  }

  render() {
    let { list1, list2 } = this.props
    return (
      <CardContainer className="inline-span span-30" style={{ height: '300px' }}>

        <span className="border-corner border-lt p-left p-top" />
        <span className="border-corner border-rb p-right p-bottom" />

        <h3 style={{ lineHeight: '50px' }}>收入统计</h3>
        <div className="row">
          {list1.map((item, index) => {
            return (
              <div key={index} className="process" style={{ textAlign: 'left' }}>
                <span className="process-company" style={{ display: 'inline-block', width: '80px', textAlign: 'center' }}>
                  {item.label}
                </span>
                <span className="process-bar" style={{ width: item.ratio + '%' }} />
                <span className="process-pend">{item.pend}</span>
              </div>
            )
          })}
          <h3>知识产权</h3>
          {list2.map((item, index) => {
            return (
              <div key={index} className="process" style={{ textAlign: 'left' }}>
                <span className="process-company" style={{ display: 'inline-block', width: '80px', textAlign: 'center' }}>
                  {item.label}
                </span>
                <span className="process-bar" style={{ width: item.ratio + '%' }} />
                <span className="process-pend">{item.pend}</span>
              </div>
            )
          })}
        </div>
      </CardContainer>
    )
  }
}

IncomeStatics.defaultProps = {
  list1: require('../api.mock/shourutongji.json'),
  list2: require('../api.mock/zhishichanquan.json')
}

export default IncomeStatics